<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册页面</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    /* 全局样式 */
    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: #f0f2f5;
    }

    /* 主容器 */
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }

    /* 注册表单 */
    .register-card {
      background: #ffffff;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 400px;
      text-align: center;
    }

    .register-card h2 {
      margin-bottom: 20px;
      color: #333;
      font-weight: 600;
    }

    /* 输入框组 */
    .input-group {
      margin-bottom: 20px;
      text-align: left;
    }

    .input-group label {
      display: block;
      margin-bottom: 5px;
      color: #555;
      font-size: 14px;
    }

    .input-group input {
      width: 100%;
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      transition: all 0.3s ease;
    }

    .input-group input:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    }

    /* 错误提示 */
    .error-message {
      color: #dc3545;
      font-size: 12px;
      margin-top: 5px;
      display: none;
    }

    /* 注册按钮 */
    .btn-register {
      width: 100%;
      padding: 12px;
      background: #007bff;
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .btn-register:hover {
      background: #0056b3;
    }

    /* 社交登录 */
    .social-login {
      margin-top: 20px;
    }

    .social-login p {
      color: #666;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .social-buttons {
      display: flex;
      justify-content: center;
      gap: 10px;
    }

    .social-btn {
      padding: 10px 20px;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .social-btn.google {
      background: #db4437;
      color: #fff;
    }

    .social-btn.facebook {
      background: #1877f2;
      color: #fff;
    }

    .social-btn:hover {
      opacity: 0.9;
    }

    /* 登录链接 */
    .login-link {
      margin-top: 20px;
      font-size: 14px;
      color: #666;
    }

    .login-link a {
      color: #007bff;
      text-decoration: none;
    }

    .login-link a:hover {
      text-decoration: underline;
    }

    /* 响应式设计 */
    @media (max-width: 480px) {
      .register-card {
        padding: 30px;
      }
    }
  </style>
</head>
<body>
<div class="container">
  <div class="register-card">
    <h2>注册新账户</h2>

    <!-- 用户名 -->
    <div class="input-group">
      <label for="username">用户名</label>
      <input type="text" id="username" placeholder="请输入用户名" required>
      <div class="error-message">用户名不能为空</div>
    </div>

    <!-- 邮箱 -->
    <div class="input-group">
      <label for="password">密码</label>
      <input type="password" id="password" placeholder="请输入密码" required>
      <div class="error-message">密码至少需要8个字符</div>
    </div>

    <!-- 密码 -->
    <div class="input-group">
      <label for="password">确认密码</label>
      <input type="password" id="againpassword" placeholder="请再次输入密码" required>
      <div class="error-message">密码不一致</div>
    </div>

    <!-- 注册按钮 -->
    <button id="zc" class="btn-register">立即注册</button>

    <!-- 社交登录 -->
    <div class="social-login">
      <p>或使用以下方式注册</p>
      <div class="social-buttons">
        <button class="social-btn google"><i class="fab fa-google"></i> Google</button>
        <button class="social-btn facebook"><i class="fab fa-facebook"></i> Facebook</button>
      </div>
    </div>

    <!-- 登录链接 -->
    <div class="login-link">
      已有账户？ <a href="#">立即登录</a>
    </div>
  </div>
</div>
<script src="../static/js/axios.min.js"></script>

<script>

  // 简单表单验证示例
  const zc = document.getElementById('zc')

    zc.onclick = function() {
    const username = document.getElementById('username')
    const password = document.getElementById('password')
    const againpassword = document.getElementById('againpassword')
    let isValid = true;

    //判断username是否为空
      if (username.value.trim() === '') {
        showError(username, '用户名不能为空');
        isValid = false;
      }


    // 密码验证
    if (password.value.length < 8) {
      showError(password, '密码至少需要8个字符');
      isValid = false;
    }
    if (password.value !== againpassword.value) {
      showError(againpassword, '两次密码不一致');
      isValid = false;
    }

    if (isValid) {
      const url = '/user/add'
      const data = {
        username: username.value, // 使用 .value 获取输入框的值
        password: password.value   // 使用 .value 获取输入框的值
      };

      axios.post(url , data)
              .then( function (res) {

                const R = res.data
                console.log(R)//0or1
                if (R ==1) {
                  alert('添加成功')
                  location.href = '/index/users.html'
                }else {
                  alert('添加失败')
                }
                //     alert(R.msg)
                // }

              });      // 这里可以添加表单提交逻辑
    }
  }

  function showError(input, message) {
    const error = input.nextElementSibling;
    error.textContent = message;
    error.style.display = 'block';
    input.style.borderColor = '#dc3545';
  }


</script>
</body>
</html>
